<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item><i class="el-icon-lx-pic"></i> 表单</el-breadcrumb-item> -->
                <el-breadcrumb-item><i class="el-icon-lx-pic"></i> 修改头像</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <!-- <div class="content-title">支持拖拽</div>
            <div class="plugins-tips">
                Element UI自带上传组件。 访问地址：<a href="http://element.eleme.io/#/zh-CN/component/upload" target="_blank"
                    >Element UI Upload</a
                >
            </div>
            <el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload> -->
            <div class="content-title">支持裁剪</div>
            <!-- <div class="plugins-tips">
                vue-cropperjs：一个封装了 cropperjs 的 Vue 组件。 访问地址：<a
                    href="https://github.com/Agontuk/vue-cropperjs"
                    target="_blank"
                    >vue-cropperjs</a
                >
            </div> -->
            <div class="crop-demo">
                <img :src="cropImg" class="pre-img" />
                <div class="crop-demo-btn">
                    选择图片
                    <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
                </div>
                <el-button class="crop-demo-btn" @click="uploadImage()">确定上传</el-button>
            </div>

            <el-dialog title="裁剪图片" :visible.sync="dialogVisible" width="30%">
                <vue-cropper
                    ref="cropper"
                    :src="imgSrc"
                    :ready="cropImage"
                    :zoom="cropImage"
                    :cropmove="cropImage"
                    style="width: 100%; height: 300px"
                ></vue-cropper>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelCrop">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
export default {
    name: 'upload',
    data: function () {
        return {
            number: localStorage.getItem('ms_number'),
            defaultSrc: localStorage.getItem('imageURL'),
            fileList: [],
            imgSrc: '',
            cropImg: localStorage.getItem('imageURL'),
            dialogVisible: false
        };
    },
    components: {
        VueCropper
    },
    methods: {
        setImage(e) {
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (event) => {
                this.dialogVisible = true;
                this.imgSrc = event.target.result;
                this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
            console.log(file);
        },
        //裁剪后的照片
        cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
            console.log(this.$refs.cropper.getCroppedCanvas());
            // console.log('裁剪后的：' + this.cropImg);
        },
        //发送上传的照片
        uploadImage() {
            console.log(this.number);
            this.$http({
                method: 'post',
                url: 'http://localhost:9900/update/image',
                data: {
                    url: this.cropImg,
                    number: this.number
                }
            }).then((res) => {
                this.AddVisible = false;
                console.log(res.data);
                this.$message.success('上传成功！');
                location.reload();
            });

            // this.$http.get('http://localhost:9900//update/image?url=' + this.cropImg).then((res) => {
            //     console.log(res.data);
            // });
        },
        cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        imageuploaded(res) {
            console.log(res);
        },
        handleError() {
            this.$notify.error({
                title: '上传失败',
                message: '图片上传接口上传失败，可更改为自己的服务器接口'
            });
        }
    },
    created() {
        // this.cropImg = this.defaultSrc;
    }
};
</script>

<style scoped>
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.el-upload--text {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 360px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.el-upload--text .el-icon-upload {
    font-size: 67px;
    color: #97a8be;
    margin: 40px 0 16px;
    line-height: 50px;
}
.el-upload--text {
    color: #97a8be;
    font-size: 14px;
    text-align: center;
}
</style>